/* Common CSS use by both light and dark themes */
:root {
  --titleBarHeight: 32px;
  --editorAreaWidth: 700px;

  /*editor*/
  --themeColor: rgba(33, 181, 111, 1);
  --highlightColor: rgba(33, 181, 111, .4);
  --selectionColor: rgba(0, 0, 0, .1);
  --editorColor: rgba(0, 0, 0, .8);
  --editorColor50: rgba(0, 0, 0, .5);
  --editorColor30: rgba(0, 0, 0, .3);
  --editorColor10: rgba(0, 0, 0, .1);
  --editorColor04: rgba(0, 0, 0, .03);
  --editorBgColor: rgba(255, 255, 255, 1);
  --deleteColor: #ff6969;
  --iconColor: #333;
  --codeBgColor: #d8d8d869;
  --codeBlockBgColor: rgba(33, 181, 111, 0.08);

  /*marktext*/
  --sideBarColor: rgba(0, 0, 0, .6);
  --sideBarTitleColor: rgba(0, 0, 0, 1);
  --sideBarTextColor: rgba(0, 0, 0, .4);
  --sideBarBgColor: rgba(242, 242, 242, 0.9);
  --sideBarItemHoverBgColor: rgba(0, 0, 0, .03);
  --itemBgColor: rgba(255, 255, 255, 0.6);
  --floatBgColor: #fff;
  --floatHoverColor: rgba(0, 0, 0, .04);
  --floatBorderColor: rgba(0, 0, 0, .1);
  --floatShadow: rgba(0, 0, 0, 0.1);
  --maskColor: rgba(255, 255, 255, .7);
}

::-webkit-scrollbar {
  background: var(--floatHoverColor);
}
::-webkit-scrollbar:vertical {
  width: 12px;
}
::-webkit-scrollbar-thumb {
  background: var(--editorColor10);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--editorColor30);
}

html, body {
  margin: 0;
  padding: 0;
  background: transparent !important;
  caret-color: var(--editorColor);
}

body {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.text-overflow {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* cover Element style*/
.el-tooltip__popper.is-dark {
  background: var(--floatBgColor);
  color: var(--sideBarColor);
  box-shadow: 0 4px 8px 0 var(--floatBorderColor);
  border: solid 1px var(--floatBorderColor);
}

.el-tooltip__popper.is-dark .popper__arrow {
  display: none;
}

.el-slider__button {
  border-color: var(--themeColor);
}

.el-slider__bar {
  background-color: var(--themeColor);
}

.ag-dialog-table {
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 var(--floatBorderColor);
  border: solid 1px var(--floatBorderColor);
  background-color: var(--floatBgColor);
}

.ag-dialog-table .dialog-title svg {
  width: 1.5em;
  height: 1.5em;
}
